export default (elementCSSSelector) => {
  //阴影元素的css属性
  const shadow_style = {
    position: "fixed",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    zIndex: 100,
    backgroundColor: "rgba(0,0,0,.5)",
    justifyContent: "center",
    alignItems: "center",
    display: "none",
  };

  //展示图片的css属性
  const dialog_style = {
    position: "relative",
    display: "block",
    width: "auto",
    height: "auto",
    cursor: 'grab',
    transform: 'all 0.5s'
    // maxHeight: "80%",
    // maxWidth: "80%",
    // verticalAlign: "middle",
  };

  //图片切换按钮的css属性
  const button_style = {
    position: "fixed",
    zIndex: 20,
    top: "49%",
    opacity: "0.5",
    cursor: "pointer",
  };

  //初始化两个切换按钮
  const leftButton = document.createElement("div");

  const rightButton = document.createElement("div");

  //设置切换按钮的内部图案
  leftButton.innerHTML =
    '<svg width="44" height="60"><polyline points="30 10 10 30 30 50" stroke="rgba(255,255,255,0.8)" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"></polyline></svg>';

  rightButton.innerHTML =
    '<svg width="44" height="60"><polyline points="14 10 34 30 14 50" stroke="rgba(255,255,255,0.8)" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"></polyline></svg>';

  setStyle(leftButton, button_style);
  setStyle(rightButton, button_style);

  leftButton.style.left = "10px";
  rightButton.style.right = "10px";
  // 创建图片展示框
  const mydialog = document.createElement("img");
  //  图片展示的阴影盒
  const mydialog_shadow = document.createElement("div");

  setStyle(mydialog_shadow, shadow_style);

  setStyle(mydialog, dialog_style);
  //  阴影盒添加关闭弹出框的事件，并限制事件触发范围，防止冒泡
  mydialog_shadow.onclick = (e) => {
    if (e.target === mydialog_shadow) dialogProxy.show = false;
  };

  //设置图片翻页事件
  leftButton.onclick = () => {
    if (imgProxy.srcIndex > 0) {
      imgProxy.srcIndex--;
      mydialog.style.width='auto'
      mydialog.style.height='auto'
      nowSize.w= mydialog.clientWidth/100
      nowSize.h= mydialog.clientHeight/100
    } else {
      alert("这已经是第一张了，往后面翻翻看吧");
    }
    mydialog.style.transform = 'all 0.5s'
    mydialog.style.left=0
    mydialog.style.top=0
    mydialog.style.transform = ''
  };

  rightButton.onclick = () => {
    if (imgProxy.srcIndex < srcArr.length - 1) {
      imgProxy.srcIndex++;
      mydialog.style.width='auto'
      mydialog.style.height='auto'
      nowSize.w= mydialog.clientWidth/100
      nowSize.h= mydialog.clientHeight/100

    } else {
      alert("这已经是最后一张了，往前面翻翻看吧");
    }
    mydialog.style.left=0
    mydialog.style.top=0
  };

  //防抖函数
  function debounce (fn, delay) {
    var timer = null;
    return function (e) {
      if(timer){ clearTimeout(timer); }
      timer = setTimeout(()=>fn(e), delay);
    }
  }
  let left=0,top=0
  //设置图片拖动事件，并阻止图片的原始链接拖动效果
  mydialog.onmousedown = function(begin) {
    begin.preventDefault()
    /*在鼠标被按下之后，div块跟随鼠标进行移动*
    *此时需要传入一个参数来获得div的坐标位置进行移动 
    */
  //  const bf = begin.clientX
  //  const bt = begin.clientY
  //  console.log(bf+' '+bt)
   document.onmousemove = debounce(function(event) {
        //浏览器IE8以及以下浏览器的兼容
        event = event || window.event;
        //div块进行移动
        left +=event.movementX
        top += event.movementY
        // console.log(event.movementX)
        mydialog.style.left = left+ "px";
        mydialog.style.top = top+ "px";
    },2)
 
    /*当鼠标被松开时候，div固定位置*/
  }
  document.onmouseup = function() {
    /*此时不让div块继续移动，即要解除onmousemove函数*/
    document.onmousemove = null;
    /*同时需要解除松开函数*
     *当div固定位置之后，已经完成了，但此时document.onmouseup函数依旧存在
     * 所以我们需要解除这个函数
     */
  };

  // window.onmousewheel=document.onmousewheel=(e)=>{
  //   if(e.wheelDelta<0){
  //       console.log("鼠标滚轮后滚")
  //   }else if(e.wheelDelta>0){
  //       console.log("鼠标滚轮前滚")
  //   }
  // }
  
  //sizeControl用于滚轮防抖
  let sizeControl = true;
  //设置 缩放的基底数值
  let nowSize = {w:0,h:0}
  //设置缩放的基础倍率
  let nowIndex = 100
  // chorme类浏览器触发滚轮事件方式
  mydialog.addEventListener("mousewheel",debounce((e)=>{
    e.preventDefault()
    if(sizeControl){
      sizeControl=false
      setIMGSize(e.deltaY)
    }
  },5) )
  // firefox类浏览器触发滚轮事件方式
  mydialog.addEventListener("DOMMouseScroll",debounce((e)=>{
    e.preventDefault()
    if(sizeControl){
      sizeControl=false
      setIMGSize(e.detail)
    }
  },5) )

  // 滚轮事件最终方法
  function setIMGSize(num){
    if(num>0){
      if(nowIndex>11)nowIndex-=10
      else alert("别缩小了，已经缩不动了")
    }else {
      nowIndex+=10
    }
    // console.log(nowIndex+'%')
    mydialog.style.width=nowSize.w*nowIndex + 'px'
    mydialog.style.height=nowSize.h*nowIndex +'px' 
    // console.log(mydialog.clientHeight)
    // console.log(nowSize)
    sizeControl=true
  }
  //将按钮和图片展示挂载到阴影盒中
  mydialog_shadow.append(mydialog);

  mydialog_shadow.append(leftButton);
  mydialog_shadow.append(rightButton);
  // 分别使用两个代理处理展示框的启动和图片切换
  const dialogProxy = new Proxy(
    { show: false },
    {
      set(target, prop, res) {
        nowIndex=100
        left=0
        top=0
        mydialog.style.left=0
        mydialog.style.top=0
        mydialog_shadow.style.display = res ? "flex" : "none";
        return Reflect.set(...arguments);
      },
    }
  );

  const imgProxy = new Proxy(
    { srcIndex: 0 },
    {
      set(target, prop, res) {
        nowIndex=100
        left=0
        top=0
        mydialog.style.left=0
        mydialog.style.top=0
        mydialog.src = srcArr[res];
        return Reflect.set(...arguments);
      },
    }
  );
  let arr;
  //根据参数获取指定的图片集合
  if(elementCSSSelector){
    arr = [...document.querySelectorAll(elementCSSSelector)]
  } else {
    arr = [...document.getElementsByTagName("img")];
  }
  const srcArr = [];
  //获取当前的body，并将图片弹出框挂载到文档中
  const mybody = document.querySelector("body");

  mybody.append(mydialog_shadow);
  //为所有img标签挂载点击事件：触发图片展示框
  for (let i = 0; i < arr.length; i++) {
    if(arr[i].src!=='')srcArr.push(arr[i].src)
    arr[i].onclick = function () {
      dialogProxy.show = true;
      imgProxy.srcIndex = i;
      mydialog.style.width='auto'
      mydialog.style.height='auto'
      nowSize.w= mydialog.clientWidth/100
      nowSize.h= mydialog.clientHeight/100
    };
  }

  //对element元素部署style样式
  function setStyle(element, style) {
    for (const key in style) {
      element.style[key] = style[key];
    }
  }
}
